<template>
  <el-dialog :title="data.titleMap[data.mode]" :width="1300" v-model="data.visible">
    <div class="right-panel">
      <div class="right-panel-search">
        <el-input v-model="data.query.name" placeholder="角色名称" clearable></el-input>
        <el-button type="primary" icon="el-icon-search" @click="query"></el-button>
      </div>
      <div
        style="
          border: 1px solid rgb(45, 140, 240);
          padding: 5px;
          align-items: center;
          display: flex;
          margin-top: 10px;
        "
        v-if="data.topIsExist"
      >
        <span style="color: rgb(45, 140, 240); font-weight: bold">选中:</span>
        &nbsp;&nbsp;&nbsp;
        <div class="checkedAll" v-for="item in data.checkedList">
          <span class="checkedAll_span">
            {{ item }}
          </span>
          <el-icon-close class="checkedAll_Icon" @click="close(item)"></el-icon-close>
        </div>
      </div>
    </div>
    <el-table :data="tableData" @row-click="rowOnClick" highlight-current-row>
      <el-table-column type="index" label="#" width="50" />
      <el-table-column prop="name" label="Name" />
    </el-table>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.visible = false">Cancel</el-button>
        <el-button type="primary" @click="confirm">Confirm</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import menuApi from "@/api/menu/index";
import { ref, reactive, nextTick } from "vue";
const data = reactive<any>({
  mode: "add",
  titleMap: {
    edit: "编辑",
    add: "新增",
  },
  visible: false,
  query: {
    name: "",
  },
  checkedList: [],
  checkedInfoList: [],
  topIsExist: false,
});
const confirm = async () => {
  data.visible = false;
  var res = await menuApi.pushhomemenulist.post(data.checkedInfoList);
  if (res.code == 0) {
    alert("成功!");
  } else {
    alert(res.message);
  }
  emits("parentMethod", data.checkedInfoList);
};
const rowOnClick = (row: any, column: any, event: any) => {
  data.topIsExist = true;
  if (data.checkedList.find((s: any) => s == row.name)) {
  } else {
    data.checkedInfoList.push(row);
    data.checkedList.push(row.name);
  }
};
const query = () => {
  var currentData: any = tableData.find((s: any) => s.name == data.query.name);
  tableData = currentData;
  location.reload();
};
//子组件的打开方法
const open = async (mode = "add", id = "") => {
  data.mode = mode;
  tableData = (await menuApi.getmenuiconlist.post()).data;
  data.visible = true;
};
const emits = defineEmits(["parentMethod"]);
const close = (item: any) => {
  data.checkedList.splice(data.checkedList.indexOf(item), 1);
  if (data.checkedList.length == 0) {
    data.topIsExist = false;
  }
};
let tableData: any = [];

defineExpose({ open });
</script>
<style scoped lang="scss">
.checkedAll {
  background: #2d8cf0;
  margin-left: 5px;
  border-radius: 3px;
  // display: inline-block;
  box-sizing: border-box;
  margin-bottom: 5px;
  min-width: 50px;
  height: 20px;
  text-align: center;
  margin-top: 5px;
  display: flex;
}
.checkedAll_span {
  color: white;
  margin-left: 5px;
  font-size: 14px;
  height: 20px;
  display: inline-block;
  padding-bottom: 10px;
  //
  // padding-bottom: 10px !important;
}
.checkedAll_Icon {
  color: rgb(255, 255, 255);
  font-size: 14px;
  width: 15px;
  height: 20px;
}
</style>
